import React, {Component} from 'react'
import ReactDOM from 'react-dom'

// 受控组件：通过 React 组件的状态来控制表单元素的值

class App extends Component{
    state = {
        txt:'',
        content: '',
        city:'bj',
        isChacked:false
    }

    // 处理所有表单框, checkbox和其他的不一样,注意看
    handleForm = e =>{
        // 获取当前DOM对象
        const target = e.target

        // 根据类型获取值
        const value = target.type == 'checkbox'
            ? target.checked
            : target.value

        // 获取到name
        const name = target.name

        this.setState({
            [name]: value
        })
    }

    render() {
        return (
            <div>
                {/* 文本框 */}
                <input type="text" name='txt' value={this.state.txt} onChange={this.handleForm} />
                <p>{this.state.txt}</p>
                <br/>
                
                {/* 富文本 */}
                <textarea name='content' value={this.state.content} onChange={this.handleForm}></textarea>
                <p>{this.state.content}</p>
                <br/>

                {/* 下拉 */}
                <select name='city' value={this.state.city} onChange={this.handleForm}>
                    <option value="sh">沙海</option>
                    <option value="sz">深圳</option>
                    <option value="bj">北京</option>
                </select>
                <p>{this.state.city}</p>
                <br/>

                {/* 复选框 */}
                <input type="checkbox" name='isChacked' checked={this.state.isChacked} onChange={this.handleForm} />
            </div>
            
        )
    }
}


ReactDOM.render(<App/>, document.getElementById('root'))